<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--　引入protobuf相关js文件　-->
<script src="/static/js/Long.min.js"></script>         <!-- https://raw.github.com/dcodeIO/Long.js/master/dist/Long.min.js -->
<script src="/static/js/ByteBufferAB.min.js"></script> <!-- https://raw.github.com/dcodeIO/ByteBuffer.js/master/dist/ByteBufferAB.min.js -->
<script src="/static/js/ProtoBuf.min.js"></script>     <!-- https://raw.github.com/dcodeIO/ProtoBuf.js/master/dist/ProtoBuf.min.js -->
<!--<script src="/static/js/require.js" data-main="/static/js/test"></script>-->
<title>Tornado Websocket</title>
</head>

<body onload='onLoad();'>
    requestID 请输入1-5:   <input type="text" id="req_id" />
    发送给userID: <input type="text" id="user_id" />
      <input type="button" onclick="sendMsg();" value="发送" />
    <br>
    requestID为请求ID,对应不同的protobuf
    <br>
    如果userID为空或者不存在则群发,接收到的消息打开f12控制台查看
</body>

<script type="text/javascript">
    var ws;
    function onLoad(){
        ws = new WebSocket("ws://localhost:8222/ws");
        ws.binaryType = "arraybuffer";
        ws.onmessage = function(e){
            handler_msg(e.data)
        }
    }

    // 接收消息处理
    var handler_msg = function (msg) {
        var buf = dcodeIO.ByteBuffer.fromBinary(msg).view;
        var request_id = buf.getInt32(0, false);
        console.info("requst_id:", request_id);
        var from_user_id = buf.getInt32(4, false);
        console.info("receive msg from usrID:", from_user_id);
        //解析主体
        var main_msg = msg.substring(8);
        var main_buf = dcodeIO.ByteBuffer.fromBinary(main_msg);
        // 创建ProtoBuf
        var ProtoBuf = dcodeIO.ProtoBuf;
        var Module;
        if(request_id == 1){
            Module = ProtoBuf.loadProtoFile("/static/pro/type1.proto").build("ParentModule");
        };
        if(request_id == 2){
            Module = ProtoBuf.loadProtoFile("/static/pro/type2.proto").build("ParentModule");
        };
        if(request_id == 3){
            Module = ProtoBuf.loadProtoFile("/static/pro/type3.proto").build("ChildrenModule");
        };
        if(request_id == 4){
            Module = ProtoBuf.loadProtoFile("/static/pro/type4.proto").build("ChildrenModule");
        };
        if(request_id == 5){
            Module = ProtoBuf.loadProtoFile("/static/pro/type5.proto").build("ParentModule");
        };
        var msgMain = Module.decode(main_buf);
        console.info(msgMain);
    };

    // 发送消息处理
    function sendMsg(){
        var requestId = document.getElementById("req_id").value - 0;
        var userID = document.getElementById("user_id").value - 0;
        var proto_msg = create_proto(requestId);
        var msg = cre_pro_msg(requestId, userID, proto_msg);
        ws.send(msg);
    }

    var cre_pro_msg = function (requestId, userID, proto) {
        var length = proto.byteLength;
        var pro_msg = new dcodeIO.ByteBuffer(length + 8, false, false);
        pro_msg.writeInt32(requestId, 0);
        pro_msg.writeInt32(userID, 4);
        pro_msg.append(proto, "undefined", 8);
        return pro_msg.view
    };

    var create_proto = function (requestID) {
        var msg;
        if(requestID == 1) msg = create_type1();
        if(requestID == 2) msg = create_type2();
        if(requestID == 3) msg = create_type3();
        if(requestID == 4) msg = create_type4();
        if(requestID == 5) msg = create_type5();
        return msg
    };

    var create_type1 =  function () {
        // 创建ProtoBuf
        var ProtoBuf = dcodeIO.ProtoBuf;
        // 先构造两个子模块
        // 子模块－１
        var ChildrenModule_1 = ProtoBuf.loadProtoFile("/static/pro/type1.proto").build("ChildrenModule");
        var childrenModule_1 = new ChildrenModule_1();
        childrenModule_1.setNumber(1);
        childrenModule_1.setName("son1");

        // 子模块－２
        var ChildrenModule_2 = ProtoBuf.loadProtoFile("/static/pro/type1.proto").build("ChildrenModule");
        var childrenModule_2 = new ChildrenModule_2();
        childrenModule_2.setNumber(2);
        childrenModule_2.setName("son2");

        // 父模块
        var ParentModule = ProtoBuf.loadProtoFile("/static/pro/type1.proto").build("ParentModule");

        // 像父模块设置值
        var parentModule = new ParentModule();
        parentModule.setNumber(12);
        parentModule.setName("father");
        parentModule.setChildrenModule(new Array(childrenModule_1,childrenModule_2));
        var msg = parentModule.toArrayBuffer();
        return msg
    };

    var create_type2 =  function () {
        // 创建ProtoBuf
        var ProtoBuf = dcodeIO.ProtoBuf;
        var ParentModule = ProtoBuf.loadProtoFile("/static/pro/type2.proto").build("ParentModule");
        var parentModule = new ParentModule();
        parentModule.setUsername("sengo");
        parentModule.setPassword("pwd");
        var msg = parentModule.toArrayBuffer();
        return msg
    };

    var create_type3 =  function () {
        // 创建ProtoBuf
        var ProtoBuf = dcodeIO.ProtoBuf;
        var ChildrenModule = ProtoBuf.loadProtoFile("/static/pro/type3.proto").build("ChildrenModule");
        var child = new ChildrenModule();
        child.setGroupname("sengo");
        child.setGroupid(55);
        var msg = child.toArrayBuffer();
        return msg
    };

    var create_type4 =  function () {
        // 创建ProtoBuf
        var ProtoBuf = dcodeIO.ProtoBuf;
        var ChildrenModule = ProtoBuf.loadProtoFile("/static/pro/type4.proto").build("ChildrenModule");
        var child = new ChildrenModule();
        child.setGroupname("sengo");
        child.setGroupid(55);
        child.setGrouptype("user");
        var msg = child.toArrayBuffer();
        return msg
    };

    var create_type5 =  function () {
        // 创建ProtoBuf
        var ProtoBuf = dcodeIO.ProtoBuf;
        var ParentModule = ProtoBuf.loadProtoFile("/static/pro/type5.proto").build("ParentModule");
        var parentModule = new ParentModule();
        parentModule.setGroup("sengo");
        parentModule.setType("user");
        var msg = parentModule.toArrayBuffer();
        return msg
    };
</script>

</html>